<%
  header_title @invitation ? t(".join_family_title", family: @invitation.family.name) : t(".title")
%>

<% if self_hosted_first_login? %>
  <div class="fixed inset-0 w-full h-fit bg-container p-5 border-b border-secondary flex flex-col gap-3 items-center text-center mb-12">
    <h2 class="font-bold text-primary text-xl"><%= t(".welcome_title") %></h2>
    <p class="text-secondary text-secondary text-sm"><%= t(".welcome_body") %></p>
  </div>
<% elsif @invitation %>
  <div class="space-y-1 mb-6 text-center">
    <p class="text-secondary">
      <%= t(".invitation_message",
            inviter: @invitation.inviter.display_name,
            role: t(".role_#{@invitation.role}")) %>
    </p>
  </div>
<% end %>

<% if @user.errors.present? %>
  <div class="text-red-600 flex items-center gap-2">
    <%= icon("circle-alert") %>
    <p class="text-sm"><%= @user.errors.full_messages.to_sentence %></p>
  </div>
<% end %>

<%= styled_form_with model: @user, url: registration_path, class: "space-y-4" do |form| %>
  <%= form.email_field :email,
      autofocus: false,
      autocomplete: "email",
      required: "required",
      placeholder: "you@example.com",
      label: true,
      disabled: @invitation.present? %>

  <% if invite_code_required? && !@invitation %>
    <%= form.text_field :invite_code, required: "required", label: true, value: params[:invite] %>
  <% end %>

  <%= form.hidden_field :invitation, value: @invitation&.token %>

  <div data-controller="password-validator">
    <div data-controller="password-visibility" class="relative">
      <%= form.password_field :password,
          autocomplete: "new-password",
          required: "required",
          placeholder: t(".password_placeholder"),
          label: true,
          maxlength: 72,
          data: {
            password_validator_target: "input",
            password_visibility_target: "input",
            action: "input->password-validator#validate"
          } %>
      <button type="button"
              class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700 focus:outline-none"
              data-action="click->password-visibility#toggle">
        <div data-password-visibility-target="showIcon">
          <%= icon("eye") %>
        </div>
        <div data-password-visibility-target="hideIcon">
          <%= icon("eye-off") %>
        </div>
      </button>
    </div>

    <div class="flex gap-4 my-4">
      <div class="h-1 bg-gray-200 rounded-full flex-grow" data-password-validator-target="blockLine" data-requirement-type="length"></div>
      <div class="h-1 bg-gray-200 rounded-full flex-grow" data-password-validator-target="blockLine" data-requirement-type="case"></div>
      <div class="h-1 bg-gray-200 rounded-full flex-grow" data-password-validator-target="blockLine" data-requirement-type="number"></div>
      <div class="h-1 bg-gray-200 rounded-full flex-grow" data-password-validator-target="blockLine" data-requirement-type="special"></div>
    </div>

    <div class="space-y-1 my-4">
      <div class="flex items-center gap-2 text-secondary text-sm" data-password-validator-target="requirementType" data-requirement-type="length">
        <%= icon("check", size: "sm") %>
        <span>Minimum 8 characters</span>
      </div>
      <div class="flex items-center gap-2 text-secondary text-sm" data-password-validator-target="requirementType" data-requirement-type="case">
        <%= icon("check", size: "sm") %>
        <span>Upper and lowercase letters</span>
      </div>
      <div class="flex items-center gap-2 text-secondary text-sm" data-password-validator-target="requirementType" data-requirement-type="number">
        <%= icon("check", size: "sm") %>
        <span>A number (0-9)</span>
      </div>
      <div class="flex items-center gap-2 text-secondary text-sm" data-password-validator-target="requirementType" data-requirement-type="special">
        <%= icon("check", size: "sm") %>
        <span>A special character (!, @, #, $, %, etc)</span>
      </div>
    </div>
  </div>

  <%= form.submit t(".submit") %>
<% end %>
